<meta charset="utf-8">
<style>
    input {
        margin: 10px 0px;
    }
</style>
账户: <input type="text" id="uname"><br />
密码: <input type="password" id="pwd"><br />
验证码:<input type="text" id="captcha"> <img src="http://kg.zhaodashen.cn/v1/public/captcha.jsp" alt=""><br />
<input type="checkbox" id="checkbox">7天登录<br  />
<input type="submit" value="登录">
</form>
<script src="./axios.js"></script>
<script>

    // 1 获取登录按钮，绑定点击事件
    document.querySelector('input[type=submit]').onclick = async function (evt) {
        // 2 事件处理函数中，阻止表单提交
        let e = evt || window.event
        e.preventDefault()
        // 3 事件处理函数中，获取接口数据
        let uname = document.querySelector('#uname').value
        let pwd = document.querySelector('#pwd').value
        let captcha = document.querySelector('#captcha').value
        // 4 事件处理函数中，请求接口
        let res = await get('http://kg.zhaodashen.cn/v1/public/login.jsp', { uname, pwd, captcha }, 'json')
        console.log(res);
        // 5 事件处理函数中，根据接口返回的数据判断
        if (res.meta.state === 200) {
        //     // 5.1 失败-弹框提示   成功-h5存储、跳转页面
        if(document.querySelector('#checkbox').checked){
            localStorage.setItem('uname', res.data.uname)
            localStorage.setItem('expires', (new Date).getTime() + 1000*60*60*24*7)
            // localStorage.setItem('expires', (new Date).getTime() + 1000*5)
        } else{
            sessionStorage.setItem('uname', res.data.uname)
        }
        
        location.href = './member.html'
        }else {
            // 弹出错误提示
            alert(res.meta.msg)
        }

    }
    // 绑定验证码点击更新事件
    document.querySelector('img').onclick = function () {
        this.src = `http://kg.zhaodashen.cn/v1/public/captcha.jsp?` + (new Date).getTime()
    }
</script>